import ProTable from '@/components/pro-table';
import type { ColumnType } from '@/components/pro-table/typing';
import router from '@/router';
import { defineComponent } from 'vue';

const columns: Array<ColumnType> = [
  {
    title: '序号',
    dataIndex: 'index',
    valueType: 'index',
    width: 70,
    hideInSearch: true,
  },
  {
    title: '用户id',
    dataIndex: 'id',
    valueType: 'text',
  },
  {
    title: '用户名称',
    dataIndex: 'username',
    valueType: 'text',
  },
  {
    title: '账号锁定',
    dataIndex: 'accountLocked',
    valueType: 'select',
    options: [
      {
        label: '是',
        value: true,
      },
      {
        label: '否',
        value: false,
      },
    ],
  },
  {
    title: '有效期',
    dataIndex: 'accountExpirationTime',
    valueType: 'datePicker',
    width: 180,
    format: 'YYYY-MM-DD',
  },
  {
    title: '创建人',
    dataIndex: 'createUserName',
    valueType: 'text',
    hideInSearch: true,
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    width: 180,
    hideInSearch: true,
  },
  {
    title: '编辑',
    key: 'edit',
    valueType: 'operation',
    onClick: (opt?: Object) => {
      console.log('operation column:编辑', opt);
    },
    hideInSearch: true,
  },
  {
    title: '详情',
    key: 'detail',
    valueType: 'operation',
    onClick: () => {
      console.log('operation column:详情');
    },
    hideInSearch: true,
  },
  {
    title: '复制',
    key: 'copy',
    valueType: 'operation',
    onClick: (opt?: Object) => {
      console.log('operation column:复制', opt);
    },
    hideInSearch: true,
  },
  {
    title: '预览',
    key: 'preview',
    valueType: 'operation',
    onClick: (opt?: Object) => {
      console.log('operation column:预览', opt);
    },
    hideInSearch: true,
  },
  {
    title: '发布',
    key: 'publish',
    valueType: 'operation',
    onClick: (opt?: Object) => {
      console.log('operation column:发布', opt);
    },
    hideInSearch: true,
  },
  {
    title: '取消发布',
    key: 'cancelPbulishing',
    valueType: 'operation',
    onClick: (opt?: Object) => {
      console.log('operation column:取消发布', opt);
    },
    hideInSearch: true,
  },
];
const toolbars: Array<ColumnType> = [
  {
    title: '新建',
    onClick: () => {
      router.push({ path: '/questionnaire/basic-info' });
    },
  },
  {
    title: '导出',
    onClick: () => {
      console.log('导出 onClick');
    },
  },
];

export default defineComponent({
  setup() {
    return () => {
      return (
        <ProTable
          columns={columns}
          toolbars={toolbars}
          title="问卷调查列表"
          requestUrl="/users/queryPage"
          bordered
        />
      );
    };
  },
});
